<template>
  <div class="formTap">
    <div class="form-group formInput">
      <label for="username">username</label>
      <input v-model="username" type="text" class="form-control" id="username" placeholder="username">
    </div>
    <div class="form-group formInput">
      <label for="password">password</label>
      <input v-model="password" type="password" class="form-control" id="password" placeholder="password">
    </div>
    <button type="submit" class="btn btn-primary" @click="handleLogin">submit</button>
  </div>
</template>

<script setup lang="js">
import { ref } from 'vue';
import { post } from '../plugin/api';
import { useAuthStore } from '../store/index';
const authStore = useAuthStore();


const username = ref();
const password = ref('');
const handleLogin = async () => {
  const baseUrl = "http://175.24.81.97:8093";

  const data = await post(`${baseUrl}/login`, {username: username.value, password: password.value});
  if(data){
    authStore.setToken(true);
    navigateTo('/todo');
  }
}




</script>


<style>
.formTap{
  margin: 20% auto;
  width: 80%;
}

.formInput{
  margin:1.5rem 0;
}
</style>
